import React from 'react';
import Page from 'components/common/Page';
import classnames from 'classnames';
import { model } from 'utils/model';
import { getValueFromObject } from 'utils/share';
import fields from './fields';
// import { Operation } from 'components/common';
// import { STSTUSKEY } from 'configs/constants';

@model('personalManage')
class RoleManage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visAdd: false,
      visResetPass: false,
      record: {}
    };
  }

  renderFiled({ key, name, render, newLine }, index) {
    const { details = {}, qrCodePicUrl } = this.props;
    details.qrCodePicUrl = qrCodePicUrl;
    const filedDesc = getValueFromObject(details, key);
    const filedVal = render ? render(filedDesc, details) : filedDesc;
    return (<div
      key={index}
      className={classnames({
        filedGroup: true,
        newLine
      })}
    >
      <span className="filedName">{name}</span>
      <span className="filedValue">{(filedVal || filedVal === 0) ? filedVal : '-'}</span>
    </div>);
  }

  render() {
    return (
      <Page inner>
        <div>
          {
            fields.map((filed, index) => this.renderFiled(filed, index))
          }
        </div>
      </Page>
    );
  }
}

export default RoleManage;
